<template>
  <div class="wrapper">
    <div class="orderHeader" style="margin: 5px 0px 0px 0px">
      <div class="orderSearch">
        <el-collapse accordion class="coll">
          <el-collapse-item>
            <template slot="title">
              <el-form ref="form" :model="orderSearch" :inline="true">
                <el-form-item label="运单号">
                  <el-input
                      id="waybill_no_search"
                    v-model="orderSearch.waybill_no"
                    @click.stop.native
                    style="width: 200px"
                    placeholder="支持批量搜索,多个单号用逗号分隔"
                  />
                </el-form-item>

                <el-form-item size="mini">
                  <el-button
                      id="go_search"
                    type="primary"
                    @click.stop.native
                    icon="el-icon-search"
                    @click="handleSearch"
                    data-tracker="P3-1"
                    >查询</el-button
                  >
                  <el-button
                    type="primary"
                    @click.stop.native
                    plain
                    icon="el-icon-refresh"
                    @click="handleReset"
                    data-tracker="P3-2"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </template>
            <template>
              <el-form ref="form" :model="orderSearch" :inline="true">
                <!-- <el-form-item label="运单状态" size="mini">
                                    <el-select v-model="orderSearch.status_list" style="width: 200px" clearable multiple
                                        @click.stop.native>
                                        <el-option v-for="(item, index) in statusArr" :key="index" :label="item"
                                            :value="index" />
                                    </el-select>
                                </el-form-item> -->
                <el-form-item label="超温预警" size="mini">
                  <el-select
                    v-model="orderSearch.is_over_temperature"
                    style="width: 200px"
                    @click.stop.native
                  >
                    <el-option
                      v-for="(item, index) in options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="创建时间" size="mini">
                  <el-date-picker
                    v-model="orderSearch.time"
                    :default-time="['00:00:00', '23:59:59']"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    clearable
                    style="width: 300px"
                    size="mini"
                    value-format="timestamp"
                    @change="handleDateChange"
                  />
                </el-form-item>
                <el-form-item label="发货人">
                  <el-input
                    v-model="orderSearch.sender_name"
                    placeholder="请输入发货人"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="发货人手机号">
                  <el-input
                    v-model="orderSearch.sender_phone"
                    placeholder="请输入发货人手机号"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="发货城市">
                  <el-cascader
                    style="width: 230px"
                    :options="areaData2"
                    filterable
                    clearable
                    v-model="sender_city_id"
                    placeholder="请选择省市区"
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'next_level_data',
                    }"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="所属客户">
                  <el-select
                    placeholder="所属客户"
                    style="width: 220px"
                    filterable
                    remote
                    reserve-keyword
                    clearable
                    :remote-method="searchCustomerList"
                    v-model="customer_id"
                  >
                    <el-option
                      v-for="item in customerList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="客户所属大区">
                  <el-select
                    style="width: 230px"
                    placeholder="请选择客户所属大区"
                    @change="$forceUpdate()"
                    filterable
                    clearable
                    v-model="orderSearch.customer_arae"
                  >
                    <el-option
                      v-for="website in websiteListDQ"
                      :key="website.id"
                      :label="website.name"
                      :value="website.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="收货人">
                  <el-input
                    v-model="orderSearch.receiver_name"
                    placeholder="收货人"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="收货人手机号">
                  <el-input
                    v-model="orderSearch.receiver_phone"
                    placeholder="收货人手机号"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="收货城市">
                  <el-cascader
                    style="width: 230px"
                    :options="areaData2"
                    filterable
                    clearable
                    v-model="receiver_city_id"
                    placeholder="请选择省市区"
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'next_level_data',
                    }"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="收货公司">
                  <el-input
                    v-model="orderSearch.receiver_company"
                    placeholder="收货公司"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="出发区域">
                  <el-select
                    style="width: 230px"
                    @change="$forceUpdate()"
                    v-model="orderSearch.from_area_id"
                    filterable
                  >
                    <el-option
                      v-for="website in websiteListDQ"
                      :key="website.id"
                      :label="website.name"
                      :value="website.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="目的区域">
                  <el-select
                    style="width: 230px"
                    @change="$forceUpdate()"
                    v-model="orderSearch.to_area_id"
                    filterable
                  >
                    <el-option
                      v-for="website in websiteListDQ"
                      :key="website.id"
                      :label="website.name"
                      :value="website.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="出发网点">
                  <el-cascader
                    v-model="orderSearch.from_network_id"
                    :options="organizationBoxData"
                    :props="propsBranchType"
                    :show-all-levels="false"
                    filterable
                    clearable
                  >
                  </el-cascader>
                </el-form-item>
                <el-form-item label="目的网点">
                  <!-- <el-select style="width: 230px" filterable clearable v-model="to_network_id">
                    <el-option v-for="website in websiteList" :key="website.id" :label="website.name" :value="website.id" />
                  </el-select> -->
                  <el-cascader
                    v-model="orderSearch.to_network_id"
                    :options="organizationBoxData"
                    :props="propsBranchType"
                    :show-all-levels="false"
                    filterable
                    clearable
                  >
                  </el-cascader>
                </el-form-item>
                <el-form-item label="承运类型" v-if="type != 'recycle'">
                  <el-select
                    style="width: 195px"
                    clearable
                    multiple
                    v-model="orderSearch.waybill_product_type"
                  >
                    <el-option
                      v-for="type in transportsType"
                      :key="type.id"
                      :label="type.name"
                      :value="type.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="发站">
                  <el-input
                    v-model="orderSearch.from_region_name"
                    placeholder="发站"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="到站">
                  <el-input
                    v-model="orderSearch.to_region_name"
                    placeholder="到站"
                    style="width: 230px"
                  />
                </el-form-item>
                <el-form-item label="创建人">
                  <el-select
                    style="width: 195px"
                    clearable
                    v-model="creator_id"
                    filterable
                    placeholder="创建人"
                  >
                    <el-option
                      v-for="type in creator_List"
                      :key="type.id"
                      :label="type.username"
                      :value="type.id"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { statusArr } from "../constants/index.js";
import {
  stayList,
  reqWebsiteList, //
  getTransportsList,
  reqHandlersList,
} from "@/api/waybill";
import { regionList } from "@/page/material/common/common"; // 地址库接口
import { organizationBox } from "@/api/organization";
import { timestamp10 } from "@/utils/mUtils";
import { customerPeople } from "@/api/information";
export default {
  name: "waybillSearchHead",
  components: {},
  props:["type"],
  data() {
    return {
      orderSearch: {
        waybill_no: "",
        status: "",
        is_over_temperature: "",
        create_time: {
          start_time: 1664553600000,
          end_time: new Date().getTime(),
        },
        time: [1664553600000, new Date().getTime()],
        sender_name: "", //发货人
        sender_phone: "", //发货人手机号
        receiver_name: "", //收货人
        receiver_phone: "", //收货人手机号
        receiver_company: "", //收货人公司
        from_network_id: [[]], //出发网点
        to_network_id: [[]], //目的网点
        from_area_id: "",
        to_area_id: "",
        customer_arae: "",
      },
      from_network_id: [[]], //出发网点
      to_network_id: [[]], //目的网点
      statusArr: statusArr,
      options: [
        // 是否超温data
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "超温",
        },
        {
          value: "2",
          label: "即将超温",
        },
        {
          value: "0",
          label: "正常",
        },
      ],
      customer_id: "", //选中的地址
      customerList: [], //所属客户
      websiteListDQ: [],
      areaData2: [], //二级地址库
      sender_city_id: [], ////发货人城市
      receiver_city_id: [], //收货人公司城市
      organizationBoxData: [],
      propsBranchType: {
        emitPath: true,
        checkStrictly: true,
        value: "id",
        label: "branch_name",
        children: "next_level_data",
      },
      transportsType: [], //承运类型
      creator_id: "", //创建人
      creator_List: [], //创建人列表
      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.provincectiy(); //地址库
    // this.getWebsiteList(); //目的网点
    this.getThermosphereType(); //承运类型
    // this.getDictionary(); // 温度区间
    this.Pagecreator();
    this.organizationBoxFn();
    this.getWebsiteListDQFn();
  },
  methods: {
    // 查询
    handleSearch() {
      this.$emit("search", {
        sender_city_id:
          this.sender_city_id[1] == "undefined" ? 0 : this.sender_city_id[1],
        receiver_city_id:
          this.receiver_city_id[1] == "undefined"
            ? 0
            : this.receiver_city_id[1],
        customer_id: this.customer_id + "",
        creator_id: this.creator_id == "" ? 0 : this.creator_id,
        ...this.orderSearch,
        create_time: {
          start_time: (this.orderSearch.create_time.start_time + "").slice(
            0,
            10
          ),
          end_time: (this.orderSearch.create_time.end_time + "").slice(0, 10),
        },
        from_network_id_list:
          this.orderSearch.from_network_id != ""
            ? [
                this.orderSearch.from_network_id[
                  this.orderSearch.from_network_id.length - 1
                ],
              ]
            : [],
        to_network_id_list:
          this.orderSearch.to_network_id != ""
            ? [
                this.orderSearch.to_network_id[
                  this.orderSearch.to_network_id.length - 1
                ],
              ]
            : [],
        from_network_id: "",
        to_network_id: "",
        from_area_id: this.orderSearch.from_area_id + "",
        to_area_id: this.orderSearch.to_area_id + "",
        customer_area_id: this.orderSearch.customer_arae + "",
        waybill_product_type: this.orderSearch.waybill_product_type != undefined ? this.orderSearch.waybill_product_type.map(Number) : []
      });
    },
    // 重置
    handleReset() {
      this.orderSearch = {
        waybill_no: "",
        status_list: [],
        is_over_temperature: "",
        create_time: {
          start_time: 1664553600 + "",
          end_time: (new Date().getTime() + "").slice(0, 10),
        },
        time: [1664553600000, new Date().getTime()],
        sender_name: "",
        sender_phone: "",
        receiver_name: "",
        receiver_phone: "",
        receiver_company: "",
        waybill_product_type: [],
        from_region_name: "",
        to_region_name: "",
        from_area_id: "",
        to_area_id: "",
        customer_arae: "",
        from_network_id: "",
        to_network_id: "",
      };
      this.customer_id = "";
      this.to_network_id = "";
      this.creator_id = "";
      this.sender_city_id = [];
      this.receiver_city_id = [];
      // this.orderSearch.from_area_id = "";
      // this.orderSearch.to_area_id = "";
      // this.orderSearch.customer_arae = "";
      // this.orderSearch.from_network_id = [];
      // this.orderSearch.to_network_id = [];
      this.$emit("reset", {
        sender_city_id:
          this.sender_city_id[1] == "undefined" ? 0 : this.sender_city_id[1],
        receiver_city_id:
          this.receiver_city_id[1] == "undefined"
            ? 0
            : this.receiver_city_id[1],
        customer_id: this.customer_id + "",
        creator_id: this.creator_id == "" ? 0 : this.creator_id,
        ...this.orderSearch,
        from_network_id_list:
          this.orderSearch.from_network_id != ""
            ? [
                this.orderSearch.from_network_id[
                  this.orderSearch.from_network_id.length - 1
                ],
              ]
            : [],
        to_network_id_list:
          this.orderSearch.to_network_id != ""
            ? [
                this.orderSearch.to_network_id[
                  this.orderSearch.to_network_id.length - 1
                ],
              ]
            : [],
        from_network_id: "",
        to_network_id: "",
        from_area_id: this.orderSearch.from_area_id + "",
        to_area_id: this.orderSearch.to_area_id + "",
        customer_area_id: this.orderSearch.customer_arae + "",
      });
    },
    // 地址库
    provincectiy() {
      regionList(0).then((res) => {
        this.childeprovicectiy(res.data);
      });
    },
    // 地址库改为二级
    childeprovicectiy(data) {
      data.forEach((item) => {
        item.next_level_data.forEach((iten) => {
          iten.next_level_data = undefined;
        });
      });
      this.areaData2 = data;
    },
    //客户所属大区
    async getWebsiteListDQFn() {
      let result = await reqWebsiteList({ branch_type: "3" });
      this.websiteListDQ = result.data;
    },
    // 网点信息
    organizationBoxFn() {
      let data = {
        show_employee: false, // 是否展示员工信息
        not_show_first_branch : 1,
      };
      organizationBox(data).then((res) => {
        if (res.code === 10000) {
          this.organizationBoxData = res.data;
        }
      });
    },
    // 承运类型
    async getThermosphereType() {
      let result2 = await getTransportsList({ is_all: false });
      this.transportsType = result2.data.data;
    },
    // 用户列表接口
    Pagecreator() {
      reqHandlersList().then((res) => {
        this.creator_List = res.data;
      });
    },
    // 揽收时间变化
    handleDateChange(val) {
      if (val) {
        this.orderSearch.create_time.start_time = timestamp10(val[0]);
        this.orderSearch.create_time.end_time = timestamp10(val[1]);
      } else {
        this.orderSearch.create_time.start_time = "";
        this.orderSearch.create_time.end_time = "";
      }
    },
    searchCustomerList(query) {
      //获取客户
      if (query !== "") {
        setTimeout(async () => {
          // let { router, router_id } = this.formData;
          let result = await customerPeople({
            name: query, // 名称
            id: "",
            is_send: "",
            is_receive: "",
          });
          this.customerList = result.data;
        }, 200);
      } else {
        this.customerList = [];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  background-color: #fff;
}
.orderHeader {
  background-color: #fff;

  .orderSearch {
    ::v-deep .el-form--inline .el-form-item__content {
      vertical-align: middle;
    }

    ::v-deep .el-collapse {
      border-top: none;
      border-bottom: none;
    }
  }
}
/deep/.coll .el-collapse-item__header {
  border-bottom: none;
}
</style>